<template>
    <div class="header-warp">
        <!-- 网站logo -->
        <div class="logo-warp">
            <img height="50" :src="logo" @click="toHome()" />
        </div>
        <!-- 头部导航按钮 -->
        <div class="nav-btns">
            <router-link :to="{ name: 'Home' }">首页</router-link>
        </div>
        <!-- 登录按钮与用户头像 -->
        <div class="nav-end">
            <router-link :to="{ name: 'Login' }" v-if="!info.is_login">登录</router-link>
            <n-dropdown :options="drop_options" v-else>
                <div class="drop-warp">
                    <n-avatar round size="medium" :src="info.avatar" />
                    <n-ellipsis
                        style="max-width: 200px;margin-left: 10px;"
                        :tooltip="false"
                    >{{ info.name }}</n-ellipsis>
                </div>
            </n-dropdown>
        </div>
    </div>
</template>

<script setup lang='ts'>
import logo from "@/assets/logo.png"
import { userinfo } from '@/utils/userinfo'
import { h } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { NIcon, useMessage } from 'naive-ui'
import { PersonCircleOutline as UserIcon, LogOutOutline as LogoutIcon } from '@vicons/ionicons5'
import { getCurrentInstance, onMounted, reactive, watch } from "vue";

// 引入路由
const router = useRouter()

// 引入消息函数
const message = useMessage()

// api访问代理
const { proxy } = getCurrentInstance() as any

// 跳转至首页
const toHome = (() => {
    router.push({ name: 'Home' })
})

// 图标回调函数
const renderIcon = ((icon: any) => {
    return () => {
        return h(NIcon, null, {
            default: () => h(icon)
        })
    }
})

const info = reactive({
    is_login: false,
    avatar: '',
    name: ''
})

onMounted(() => {
    proxy.$api.user.getUserInfo().then((result: any) => {
        if (result.success) {
            info.is_login = userinfo.is_login = true
            info.avatar = userinfo.avatar = result.data.avatar
            info.name = userinfo.user_name = result.data.name
            userinfo.is_admin = result.data.is_admin
        } else {
            info.is_login = userinfo.is_login = false
        }
    }).catch(() => {
        message.error('未知错误')
    });
})

watch(userinfo, () => {
    info.is_login = userinfo.is_login
    info.avatar = userinfo.avatar
    info.name = userinfo.user_name
})

// 用户下拉菜单
const drop_options = [
    {
        label: '个人信息',
        key: 'edit',
        icon: renderIcon(UserIcon),
        props: {
            onClick: () => {
                router.push({ name: 'UserInfo' })
            }
        }
    },
    {
        label: '退出登录',
        key: 'logout',
        icon: renderIcon(LogoutIcon),
        props: {
            onClick: () => {
                proxy.$api.entry.logout().then((result: any) => {
                    if (result.success) {
                        message.success("登出成功")
                        userinfo.is_login = false
                        userinfo.is_admin = false
                        router.push({ name: "Home" })
                    } else {
                        message.warning(result.msg)
                    }
                }).catch(() => {
                    message.error('未知错误')
                });
            }
        }
    }
]
</script>

<style scoped>
.header-warp {
    background-color: #333333;
    height: 60px;
    padding-left: 20px;
}

.logo-warp {
    cursor: pointer;
    float: left;
}

.nav-btns {
    color: white;
    font-size: 23px;
    font-family: "Segoe UI";
    font-weight: 600;
    margin-top: 6px;
    margin-left: 40px;
    float: left;
}

.nav-btns a {
    text-decoration: none;
    color: white;
    margin-right: 20px;
}

.nav-end {
    color: white;
    display: flex;
    align-items: center;
    font-size: 18px;
    float: right;
    margin-top: 16px;
    margin-right: 45px;
}

.nav-end a {
    text-decoration: none;
    color: white;
}

.drop-warp {
    display: flex;
    align-items: center;
}
</style>